<template>
  <div class="create">
    <div class="first">
      <div style="font-weight: 650;font-size: 18px;line-height:45px;">
        <span>每日签到固定奖励</span>
      </div>
      <div
        style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
      >
        <el-checkbox v-model="checkOne">积分</el-checkbox>
        <div>
          送&nbsp;&nbsp;&nbsp;<el-input
            v-model="inputOne"
            size="medium"
            :disabled="checkOne === true ? false : true"
            style="width:80px;"
          ></el-input
          >&nbsp;&nbsp;&nbsp;积分
        </div>
      </div>
      <div
        style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
      >
        <el-checkbox v-model="checkTwo">余额</el-checkbox>
        <div>
          送&nbsp;&nbsp;&nbsp;<el-input
            v-model="inputTwo"
            size="medium"
            :disabled="checkTwo === true ? false : true"
            style="width:80px;"
          ></el-input
          >&nbsp;&nbsp;&nbsp;元
        </div>
      </div>
    </div>
    <div class="two">
      <div style="font-weight: 650;font-size: 18px;line-height:45px;">
        <span>连续签到额外奖励</span>
      </div>
      <div
        style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
      >
        <div style="display: flex;">
          <div>
            <span>递增奖励&nbsp;&nbsp;&nbsp;</span>
            <el-switch v-model="value" @change="reward"></el-switch>
            <span>&nbsp;&nbsp;&nbsp;说明&nbsp;&nbsp;&nbsp;</span
            ><span
              ><i
                class="el-icon-info"
                style="font-size:18px"
                @mouseenter="mesg = true"
                @mouseout="mesg = false"
              ></i
            ></span>
          </div>
          <span
            v-if="mesg"
            style="display: block;line-height: 15px;width: 64%; margin-left: 20px"
            >用户连续签到第二天起，开始递增奖励，若断签从头计算。例如，除了每日签到固定送5积分外，此处勾选了第二天起每天递增奖励1积分，
            5天后不再递增，张三第一天签到得固定的5积分，第二天连续签到，得固定的5积分和额外的1积分共6积分，第三天得7积分，其连续签到得
            到的积分数列为5,5+1,5+2,5+3,5+4,5+5,5+5,5+5,5+5....，若张三断签，则额外的递增积分从头计算</span
          >
        </div>
      </div>
      <div v-if="value">
        <div
          style="display: flex;font-size: 14px;color: #606266;line-height: 50px;margin-top: 10px;"
        >
          <el-checkbox v-model="checkThr">积分</el-checkbox>
          <div>
            第二天起递增奖励&nbsp;&nbsp;&nbsp;<el-input
              v-model="inputThr"
              size="medium"
              :disabled="checkThr === true ? false : true"
              style="width:80px;"
            ></el-input>
            &nbsp;&nbsp;&nbsp;积分&nbsp;&nbsp;&nbsp;
          </div>
          <div>
            <el-input
              v-model="inputFor"
              size="medium"
              :disabled="checkThr === true ? false : true"
              style="width:80px;"
            ></el-input
            >&nbsp;&nbsp;&nbsp;天，后不在递增
          </div>
        </div>
        <div
          style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
        >
          <el-checkbox v-model="checkFor">余额</el-checkbox>
          <div>
            第二天起递增奖励&nbsp;&nbsp;&nbsp;<el-input
              v-model="inputFiv"
              size="medium"
              :disabled="checkFor === true ? false : true"
              style="width:80px;"
            ></el-input
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div>
            <el-input
              v-model="inputSix"
              size="medium"
              :disabled="checkFor === true ? false : true"
              style="width:80px;"
            ></el-input
            >&nbsp;&nbsp;&nbsp;天，后不在递增
          </div>
        </div>
      </div>
      <div
        style="display: flex;font-size: 14px;color: #606266;line-height: 50px; margin-top: 10px;"
      >
        <div style="display: flex;">
          <div>
            <span>指定天数奖励&nbsp;&nbsp;&nbsp;</span>
            <el-switch v-model="value1" @change="switchTag"></el-switch>
            <span>说明&nbsp;&nbsp;&nbsp;</span
            ><span
              >&nbsp;&nbsp;&nbsp;<i
                class="el-icon-info"
                style="font-size:18px"
                @mouseenter="messg = true"
                @mouseout="messg = false"
              ></i
            ></span>
          </div>
          <span
            v-if="messg"
            style="display: block;line-height: 15px;width: 70%; margin-left: 20px"
            >用户到达指定的天数后，在该时间点，获得额外赠送奖励，若断签则从头计算。商家设置连续签到第3天送优惠券A，连续签到第7天送优惠券B，
            超过以上连续天数后，每日送5元余额，张三连续签到的第3天得A，第7天得B，第8天得5元余额，第9天得5元余额，若张三断签，则重新计算连续天数，
            可再得相应奖励；若商家设置连续第3天送优惠券A，连续第7天送优惠券B，超过后不再赠送，活动未停用的状态下，已得到奖品的用户断签后也不再得奖品（修改规则的除外）</span
          >
        </div>
      </div>
      <div v-if="value1">
        <div v-for="(item, index) in btncode" :key="index">
          <div
            style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
          >
            <div><span>连续签到第&nbsp;&nbsp;&nbsp;</span></div>
            <div>
              <el-input
                v-model="item.assign_day"
                size="medium"
                :disabled="value1 === true ? false : true"
                style="width:80px;"
              ></el-input>
              天，额外赠送一下奖励
            </div>
          </div>
          <div
            style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
          >
            <el-checkbox v-model="checkFiv">优惠券</el-checkbox>
            <div>
              <span>{{ item.title }}</span>
              <el-button
                type="primary"
                plain
                :disabled="checkFiv === true ? false : true"
                @click="add"
                >添加优惠券</el-button
              >
            </div>
          </div>
          <div
            style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
          >
            <el-checkbox v-model="checkSix">积分</el-checkbox>
            <div>
              送&nbsp;&nbsp;&nbsp;<el-input
                v-model="item.assign_fee"
                size="medium"
                :disabled="checkSix === true ? false : true"
                style="width:80px;"
              ></el-input
              >&nbsp;&nbsp;&nbsp;积分
            </div>
          </div>
          <div
            style="display: flex;font-size: 14px;color: #606266;line-height: 50px;"
          >
            <el-checkbox v-model="checkSev">余额</el-checkbox>
            <div>
              送&nbsp;&nbsp;&nbsp;<el-input
                v-model="item.assign_money"
                size="medium"
                :disabled="checkSev === true ? false : true"
                style="width:80px;"
              ></el-input
              >&nbsp;&nbsp;&nbsp;元
            </div>
          </div>
          <div
            v-if="btncode.length > 1"
            class="three"
            style="margin-bottom: 10px;"
          >
            <el-button type="primary" plain size="mini" @click="delData(index)"
              >删除指定天数规则</el-button
            >
          </div>
        </div>
      </div>
      <div class="three">
        <el-button type="primary" plain @click="addData()"
          >添加指定天数规则</el-button
        >
      </div>
    </div>
    <div>
      <el-dialog title="优惠券列表" :visible.sync="dialogTableVisible">
        <Table
          ref="multipleTable"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="劵名" prop="title" width="180px">
          </el-table-column>
          <el-table-column
            prop="type"
            label="优惠券类型"
            align="center"
            min-width
          >
            <template slot-scope="scope">
              <span> {{ scope.row.type === "0" ? "满减券" : "折扣券" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="有效时间"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type_time === 1">
                {{ scope.row.stime }} 至 {{ scope.row.etime }}</span
              >
              <span v-else
                >领取{{ scope.row.stime }}天后生效，{{
                  scope.row.etime === 0
                    ? "永久有效"
                    : `有效期${scope.row.etime}天`
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" min-width>
          </el-table-column>
          <el-table-column
            prop="stock"
            label="库存数量"
            align="center"
            min-width
          >
          </el-table-column>
          <el-table-column
            prop="user_limit"
            label="每人限领"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
        </Table>
        <div style="text-align: center;">
          <el-pagination
            style="margin-top:20px;"
            class="foot-o peration-pagination"
            :page-size="10"
            layout="prev, pager, next"
            :total="total"
            @current-change="changes"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="规则说明及分享设置" :visible.sync="dialogTableVisibled">
        <div style="margin-left: 160px;">
          <div style="display: flex;">
            <p style="margin-right: 30px;">签到规则文案</p>
            <el-input
              v-model="textarea"
              type="textarea"
              :rows="3"
              placeholder="请输入签到规则文案内容"
              style="width:500px;"
              size="medium"
            >
            </el-input>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <p style="margin-right: 60px;">分享标题</p>
            <el-input
              v-model="textarea1"
              type="textarea"
              :rows="3"
              placeholder="请输入分享标题内容"
              style="width:500px;"
              size="medium"
            >
            </el-input>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <p style="margin-right: 60px;">分享文案</p>
            <el-input
              v-model="textarea2"
              type="textarea"
              :rows="3"
              placeholder="请输入分享文案内容"
              style="width:500px;"
              size="medium"
            >
            </el-input>
          </div>
        </div>
        <div style="margin-top: 30px;text-align: center;">
          <el-button plain style="width:100px;" @click="clear">取消</el-button>
          <el-button type="primary" style="width:100px;" @click="save"
            >保存
          </el-button>
        </div>
      </el-dialog>
    </div>
    <Footer>
      <el-button plain style="width:150px;" @click="cleared">取消</el-button>
      <el-button plain @click="set">规则说明及分享设置</el-button>
      <el-button type="primary" style="width:150px;" @click="saved"
        >保存</el-button
      >
    </Footer>
  </div>
</template>
<script>
import { ADDSIGIN, COUPONLIST } from "../../service";
export default {
  name: "Creatsigin",
  props: {
    signOpen: {
      type: Number,
      default: -1
    },
    datamsg: {
      type: Object,
      default: () => {}
    },
    sigined: {
      type: Boolean
    }
  },
  data() {
    return {
      checkOne: "",
      checkTwo: "",
      checkThr: "",
      checkFor: "",
      checkFiv: "",
      inputOne: "",
      inputTwo: "",
      inputThr: "",
      inputFor: "",
      inputFiv: "",
      checkSix: "",
      checkSev: "",
      inputSix: "",
      textarea: "",
      textarea1: "",
      textarea2: "",
      value1: true,
      value: true,
      messg: false,
      mesg: false,
      btncode: [
        {
          id: 0,
          assign_day: 3,
          title: "",
          assign_coupon: 0,
          assign_fee: "",
          assign_money: ""
        }
      ],
      text: {
        id: 0,
        assign_day: "",
        assign_coupon: 0,
        assign_fee: "",
        assign_money: ""
      },
      tableData: [],
      dialogTableVisible: false,
      dialogTableVisibled: false,
      num: 0,
      title: "",
      lg_coupon_id: "",
      pages: 0,
      total: 0
    };
  },
  created() {
    this.couponAPI();
    if (this.datamsg) {
      if (this.datamsg.fix_fee !== "" || this.datamsg.fix_money !== "") {
        this.checkOne = true;
        this.checkTwo = true;
      }
      if (this.datamsg.reward_fee !== "" || this.datamsg.reward_money !== "") {
        this.checkThr = true;
        this.checkFor = true;
        this.checkFiv = true;
      }
      if (this.datamsg.data !== "") {
        this.checkSix = true;
        this.checkSev = true;
        this.checkSix = true;
      }
      this.inputOne = this.datamsg.fix_fee;
      this.value = this.datamsg.reward_open;
      this.inputTwo = this.datamsg.fix_money;
      this.inputThr = this.datamsg.reward_fee;
      this.inputFor = this.datamsg.reward_day_fee;
      this.inputFiv = this.datamsg.reward_money;
      this.inputSix = this.datamsg.reward_day_money;
      if (this.datamsg.data !== "") {
        this.btncode = this.datamsg.data;
      } else {
        this.btncode = this.btncode;
      }
      this.textarea = this.datamsg.sign_copy;
      this.textarea1 = this.datamsg.sign_title;
      this.textarea2 = this.datamsg.share_copy;
    }
  },
  methods: {
    add() {
      this.couponAPI();
      this.dialogTableVisible = true;
    },
    clear() {
      this.dialogTableVisibled = false;
    },
    cleared() {
      if (this.sigined === true) {
        this.$emit("clickSigin", "siginedd");
      } else if (this.datamsg) {
        this.$emit("clickSigin", "siginmsg");
      }
    },
    set() {
      this.dialogTableVisibled = true;
    },
    save() {
      this.dialogTableVisibled = false;
    },
    saved() {
      this.addsiginAPI();
      this.$emit("clickSigin", "modify");
    },
    delData(i) {
      this.btncode.splice(i, 1);
    },
    changes(page) {
      this.pages = page;
      this.couponAPI();
    },
    addData() {
      if (this.btncode.length < 7) {
        this.text.id = this.btncode.length + 1;
        let old = "";
        this.btncode.map(ele => {
          old = ele.assign_day;
        });
        this.text.assign_day = old + 2;
        if (this.text.assign_day <= 15) {
          this.btncode.push(JSON.parse(JSON.stringify(this.text)));
        }
      }
    },
    switchTag(ele) {
      this.value1 = ele;
    },
    reward(ele) {
      this.value = ele;
    },
    handleSelectionChange(e) {
      let table = e;
      table.map(ele => {
        this.title = ele.title;
        this.lg_coupon_id = ele.lg_coupon_id;
      });
      this.btncode.map(ele => {
        ele.title = this.title;
        ele.assign_coupon = this.lg_coupon_id;
      });
      this.dialogTableVisible = false;
    },
    async addsiginAPI() {
      let prams = {
        sign_open: this.datamsg ? this.datamsg.sign_open : this.signOpen,
        fix_fee: this.checkOne === true ? this.inputOne : 0,
        fix_money: this.checkTwo === true ? this.inputTwo : 0,
        reward_open: this.value === true ? 1 : 0,
        reward_fee: this.checkThr === true ? this.inputThr : 0,
        reward_day_fee: this.checkThr === true ? this.inputFor : 0,
        reward_money: this.checkFor === true ? this.inputFiv : 0,
        reward_day_money: this.checkFor === true ? this.inputSix : 0,
        assign: this.value1 === true ? 1 : 0,
        data: JSON.stringify(this.btncode),
        type_add: this.datamsg ? "save" : "add",
        sign_id: this.datamsg ? this.datamsg.sign_id : "",
        sign_copy: this.textarea,
        sign_title: this.textarea1,
        share_copy: this.textarea2
      };
      await ADDSIGIN(prams).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "数据请求成功",
            type: "success"
          });
        }
      });
    },
    couponAPI() {
      COUPONLIST({
        page: this.pages,
        pageshow: 10
      }).then(res => {
        if (res.code === 200) {
          res.data.list.map(ele => {
            ele.create_time =
              ele.create_time !== null
                ? this.times(parseInt(ele.create_time))
                : "";
          });
          this.tableData = res.data.list;
        } else {
          this.$message({
            message: "数据请求失败",
            type: "error"
          });
          this.tableData = [];
        }
      });
    },
    times(timestamp) {
      var time = new Date(timestamp * 1000);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  }
};
</script>
<style lang="scss" scoped></style>
